<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="editmain">
        <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ntModalLabel" type="{$request}">{:strtoupper($title)}</h4>
                <input type="hidden" value="{$request}" id="opentype">
                <input type="hidden" value="{$id|default=''}" id="openid">
            </div>
            <div class="modal-body">
                    <div class="row clearfix">
                            <div class="col-md-12 column">
                              <div class="alert alert-dismissable alert-info">
                                <button type="button" class="close">×</button>
                                <p></p>
                                </div>
                            </div>
                           </div>
               <div class="row clearfix" style="padding-top:12px">
                    <div class="col-md-12 column">
                        <ul class="nav nav-tabs"  role="tablist">
                            <li  role="presentation" :class="{'active':index==0}" v-for="(item,index) in langs">
                                <a :href="'#'+item.code"  role="tab" data-toggle="tab">{{item.name}}</a>
                            </li>
                        </ul>
                        <form class="tab-content formbox">
                        <div role="tabpanel" :class="{'tab-pane':true,'active':index==0}" :id="item.code" v-for="(item,index) in langs">
                            <table class="table table-striped table-hover ntTable">
                                <tbody>
                                    <tr>
                                        <td class="col-md-2">{:strtoupper(lang("attribute_name"))}<span class="required"></span></td>
                                        <td>
                                            <input type="text" class="form-control" name="classname_zh" placeholder='{:lang("attribute_name")}'  v-model="data[item.code].classname">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{:strtoupper(lang("attribute_value"))}<span class="required"></span></td>
                                        <td>
                                            <div class="input-group">
                                                <input type="text" class="form-control"  v-model="addclassval">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" data-lang="zh"  type="button" @click="addval"><span class="glyphicon glyphicon-plus"></span> {:strtoupper(lang('add'))}</button>
                                                </span>
                                            </div><!-- /input-group -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td class="arrrlist">
                                                    <div class="col-md-3 col-sm-4 col-xs-6 valitem" style="padding:4px" v-for="(itemval,valIndex) in data[item.code].classVal">
                                                        <div class="input-group input-group-sm">
                                                            <input type="text" class="form-control" name="val_zh" v-model="data[item.code].classVal[valIndex].value">
                                                            <span class="input-group-btn">
                                                                <button type="button" class="btn btn-default">
                                                                    <span class="glyphicon glyphicon-pencil" style="margin:0"></span>
                                                                </button>
                                                                <button type="button" class="btn btn-default " @click="delval(valIndex)">
                                                                    <span class="glyphicon glyphicon-remove" style="margin:0"></span>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                        </td>
                                    </tr>           
                                    <tr>
                                        <td>{:strtoupper(lang('status'))}</td>
                                        <td class="status">
                                            <label class="checkbox-inline">
                                                <input type="radio" :name="'radio_'+item.code" value="1" :checked="state==1" @click="changestate(1)"> {:strtoupper(lang('normal'))}
                                            </label>
                                            <label class="checkbox-inline">
                                                <input type="radio" :name="'radio_'+item.code" value="3" :checked="state==3" @click="changestate(3)"> {:strtoupper(lang("hide"))}
                                            </label>
                                            <label class="checkbox-inline">
                                                <input type="radio" :name="'radio_'+item.code" value="2" :checked="state==2"
                                                @click="changestate(2)"> {:strtoupper(lang('delete'))}
                                            </label>
                                            <label class="checkbox-inline">
                                                <input type="radio" :name="'radio_'+item.code" value="4" :checked="state==4" 
                                                @click="changestate(4)"> {:strtoupper(lang("off_the_shelf"))}
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{:strtoupper(lang('universal'))}</td>
                                        <td class="general">
                                            
                                            <label class="checkbox-inline">
                                                <input type="radio" :name="'general_'+item.code" value="1"  :checked="is_public==1" @click="changepublic(1)"> {:strtoupper(lang('yes'))}
                                            </label>
                                            <label class="checkbox-inline">
                                                <input type="radio" :name="'general_'+item.code" value="2"  :checked="is_public==2" @click="changepublic(2)"> {:strtoupper(lang('no'))}
                                            </label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </form>
                    </div>
                </div>
                



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}</button>
                <button type="button" class="btn btn-primary" style="padding-left:24px;padding-right:24px" @click="savefun"><span class="glyphicon glyphicon-floppy-disk"></span>{:strtoupper(lang('save'))}</button>
            </div>
        </div>
    <script src="/static/Admin/webjs/vue.js"></script>
    <script>

        new Vue({
            el:'#editmain',
            data:()=>({
                langs:[],
                data:{},
                addclassval:'',
                state:1,
                is_public:1
            }),
            methods:{
                getdata(){
                    $.ajax({
                        url:'/admin/proattr/attrEdit?request=requestAjax&id='+$('#openid').val(),
                        type:'post',
                        success:data=>{
                            data=JSON.parse(data)
                            console.log(data)
                            for(key in this.data) {
                                this.data[key].classname=data.data.selfdata['name_'+key]
                                this.data[key].classVal=data.data.selfdata.valuename[key]
                            }
                            this.$forceUpdate()
                        }
                    })
                },
                addval(){
                    if(this.addclassval=='')
                    return
                    for(key in this.data) {
                        if(this.data[key].classVal.every((item,index)=>item.value!=this.addclassval)){
                            this.data[key].classVal.push({value:this.addclassval,mkey:""})
                        }       
                    }
                    this.$forceUpdate()
                },
                changestate(type){
                    this.state=type
                },
                changepublic(type){
                    this.is_public=type
                },
                delval(index){

                    for(key in this.data) {
                        this.data[key].classVal.splice(index,1)        
                    }
                    this.$forceUpdate()
                },
                savefun(){
                    console.log(13)
                    for(key in this.data) {
                        this.data[key].state=this.state
                        this.data[key].is_public=this.is_public
                        this.data[key].id=$('#openid').val()
                    }

                    if($('#opentype').val() =="add"){
                        var url = "/admin/proattr/attrAdd?request=insert";
                    }else{
                        var url = "/admin/proattr/attrEdit?request=update";
                    }
                    $.ajax({
                        url:url,
                        type:'post',
                        data:{data:this.data},
                        success:data=>{
                            data = JSON.parse(data)
                            if(data.status==1){
                                change_mes_type('.alert',data.status)
                                $('.alert').show()
                                $('.alert p').html('*'+data.msg+'<br>')
                                $('#proatt_editModal').modal('hide')
                            }else{
                                change_mes_type('.modal-body .alert',data.status)
                                $('.modal-body .alert').show()
                                $('.modal-body .alert p').html('*'+data.msg+'<br>')
                            }
                        }
                    })
                }
            },
            mounted(){
                $.ajax({
                    url:'/admin/api/getLangType',
                    type:'post',
                    success:data=>{
                        this.langs = JSON.parse(data)
                        this.langs.forEach((item,index)=>{
                            this.data[item.code]={
                                    classname:"",
                                    classVal:[]
                                }
                        })
                        if($('#opentype').val()!="add"){
                            this.getdata()
                        }
                    }
                })
                
            }
        })
        $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $('.save').click()
        }
        }); 
    </script>
</body>
</html>